<template>
  <div class="consumption-record-container">
    <div class="page-header">
      <h2 class="page-title">消费记录</h2>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      class="consumption-table"
    >
      <el-table-column
        prop="createTime"
        label="消费时间"
        width="180"
      ></el-table-column>
      <el-table-column label="消费类型" width="120">
        <template #default="{ row }">
          {{ getSpentTypeName(row.spentTypeId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="waterSpentMoney"
        label="消费金额"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="waterAccountMoney"
        label="账户余额"
        width="120"
      ></el-table-column>
      <el-table-column prop="id" label="订单号" width="120"></el-table-column>
    </el-table>

    <div
      class="pagination-container"
      style="margin-top: 20px; text-align: center"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import bossApi from "@/http/bossApi.js";
export default {
  data() {
    return {
      waterList: [],
      tenantId: 1,
      user: {},
      id: "",
      spentTypeList: [],
      tableData: [], // 当前页显示的数据
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总条数
    };
  },
  methods: {
    getBossWater() {
      bossApi
        .getBossWater({
          tenantId: this.tenantId,
          id: this.user.id,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.code === 200) {
            this.waterList = res.data;
            this.total = this.waterList.length;
            this.handleCurrentChange(1); // 初始加载第一页
          } else {
            console.warn("获取消费记录失败:", res);
          }
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    getUser() {
      const userStr = localStorage.getItem("user");
      if (!userStr) {
        console.warn("用户未登录");
        return;
      }
      try {
        this.user = JSON.parse(userStr);
        this.id = this.user.id;
      } catch (e) {
        console.error("用户信息解析失败:", e);
      }
    },
    getAllSpentType() {
      bossApi.getAllSpentType().then((res) => {
        if (res.code === 200) {
          this.spentTypeList = res.data;
          console.log(this.spentTypeList);
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      const start = (val - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.waterList.slice(start, end);
    },
    getSpentTypeName(id) {
      const type = this.spentTypeList.find((item) => item.id === id);
      return type ? type.spentTypeName : "未知";
    },
  },
  created() {
    this.getUser();
    this.getBossWater();
    this.getAllSpentType();
  },
};
</script>

<style scoped>
.consumption-record-container {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.consumption-table {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.consumption-table th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 600;
  border-bottom: 2px solid #ebeef5;
  font-size: 14px;
}

.consumption-table td {
  padding: 16px 16px;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  color: #666;
}

.consumption-table tr:hover {
  background-color: #f5f7fa;
  transition: background-color 0.2s ease;
}

.pagination-container {
  padding: 20px 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 800px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.el-pagination .el-pagination__total,
.el-pagination .el-pagination__sizes,
.el-pagination .el-pagination__jump {
  margin: 0 10px;
}

.el-pagination .el-pagination__total {
  color: #666;
}

.el-pagination .el-pagination__sizes .el-select .el-select__caret {
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .consumption-record-container {
    padding: 15px;
  }

  .page-title {
    font-size: 1.3rem;
  }

  .consumption-table {
    font-size: 13px;
  }

  .consumption-table th,
  .consumption-table td {
    padding: 12px 12px;
  }
}
</style>
